<template>
	<view>
		<view class="gerBox">
		<ul class="gerOne">
			<li>客户状态</li>
			<li>客户星级</li>
			<li>客户归属</li>
		</ul>
		<ul class="gerTwo">
			<li>正在跟进</li>
			<li>
				<uni-icons
					v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
					:type='item' :key="index" size="14"></uni-icons>
			</li>
			<li>赵小刚</li>
		</ul>
		<ul class="gerOne">
			<li>客户类型</li>
			<li>首联系人</li>
			<li>下次跟进</li>
		</ul>
		<ul class="gerTwo">
			<li>企业客户</li>
			<li>
				李小红
			</li>
			<li>2019-04-15 12:00</li>
		</ul>
		</view>
		
		<view class="tabBox">
			 <u-tabs :list="list1" @click="click"></u-tabs>
			<view v-if="current == 0">
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
				<view class="timeR">
					<text class="dateS">08-23</text>
					<view class="timeL">
						<image src="../../../static/user.png"   class="userLogo" mode=""></image>
						<view class="timeL_center">
							<view>
							<text class="wName">赵小刚</text>
							<text>销售经理</text>
							</view>
							<text>客户对产品意向很高，但是希望价格能有优惠</text>
							<text>2019-08-23 22:31</text>
						</view>
						<view class="timeL_right">
							<text>跟进（到访）</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current == 1">
				<h4>基本信息</h4>
				<ol class="jiben">
					<li>
						<text>客户名称</text>
						<text>深圳木卫二科技有限公司</text>
					</li>
					<li>
						<text>助记名称</text>
						<text></text>
					</li>
					<li>
						<text>客户类型</text>
						<text>企业客户</text>
					</li>
					<li>
						<text>客户星级</text>
						<text>
							<uni-icons
								v-for="(item, index) in startEvaluate(cardInfo.content.orderMarketAndCom.info[1].value)"
								:type='item' :key="index" size="14"></uni-icons>
						</text>
					</li>
					<li>
						<text>客户状态</text>
						<text>正在跟进</text>
					</li>
					<li>
						<text>所属行业</text>
						<text>电子商务</text>
					</li>
					<li>
						<text>客户来源</text>
						<text>电子营销</text>
					</li>
					<li>
						<text>客户归属</text>
						<text>赵小刚  (已锁定，到期时间10/30)</text>
					</li>
					<li>
						<text>所在地区</text>
						<text>广东省深圳市</text>
					</li>
					<li>
						<text>详细地址</text>
						<text>10-20人</text>
					</li>
					<li>
						<text>企业规模</text>
						<text>10-20人</text>
					</li>
					<li>
						<text>下级客户</text>
						<text>10</text>
					</li>
					<li>
						<text>备注信息</text>
						<text></text>
					</li>
				</ol>
			</view>
			<view v-if="current == 2" class="textTit">
				<view class="textTit_box">
					<text class="textTit_xian"></text>
					<view class="textTit_right">
						<text>与客户沟通报价事宜</text>
						<text>最后跟进：2019-03-23 22:31</text>
						<text>紧要程度:紧急</text>
					</view>
					<view class="rrrrr">
						<text>未开始</text>
						<image src="../../../static/user.png" mode="" class="logo"></image>
						<text>赵小刚</text>
					</view>
				</view>
				<view class="textTit_box">
					<text class="textTit_xian"></text>
					<view class="textTit_right">
						<text>与客户沟通报价事宜</text>
						<text>最后跟进：2019-03-23 22:31</text>
						<text>紧要程度:紧急</text>
					</view>
					<view class="rrrrr">
						<text>未开始</text>
						<image src="../../../static/user.png" mode="" class="logo"></image>
						<text>赵小刚</text>
					</view>
				</view><view class="textTit_box">
					<text class="textTit_xian"></text>
					<view class="textTit_right">
						<text>与客户沟通报价事宜</text>
						<text>最后跟进：2019-03-23 22:31</text>
						<text>紧要程度:紧急</text>
					</view>
					<view class="rrrrr">
						<text>未开始</text>
						<image src="../../../static/user.png" mode="" class="logo"></image>
						<text>赵小刚</text>
					</view>
				</view>
				<view class="textTit_box">
					<text class="textTit_xian"></text>
					<view class="textTit_right">
						<text>与客户沟通报价事宜</text>
						<text>最后跟进：2019-03-23 22:31</text>
						<text>紧要程度:紧急</text>
					</view>
					<view class="rrrrr">
						<text>未开始</text>
						<image src="../../../static/user.png" mode="" class="logo"></image>
						<text>赵小刚</text>
					</view>
				</view>
				<view class="textTit_box">
					<text class="textTit_xian"></text>
					<view class="textTit_right">
						<text>与客户沟通报价事宜</text>
						<text>最后跟进：2019-03-23 22:31</text>
						<text>紧要程度:紧急</text>
					</view>
					<view class="rrrrr">
						<text>未开始</text>
						<image src="../../../static/user.png" mode="" class="logo"></image>
						<text>赵小刚</text>
					</view>
				</view>
			</view>
			<view v-if="current == 3">
				<view class="oneList">
					<text>联系人</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>下级客户</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>跟进记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>通话记录</text>
					<text>100</text>
				</view><view class="oneList">
					<text>短信记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>工单记录</text>
					<text>100</text>
				</view><view class="oneList">
					<text>商机记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>订单记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>发票记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>退款记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>相关记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>归属记录</text>
					<text>100</text>
				</view>
				<view class="oneList">
					<text>操作日志</text>
					<text>100</text>
				</view>
			</view>
			 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				 list1: [{
				                    name: '客户动态',
				                }, {
				                    name: '资料详情',
				                }, {
				                    name: '任务记录'
				                }, {
				                    name: '更多信息'
				                }],
				cardInfo:{
						cardType:"客户管理",
						titleInfo:{
							title:'客户管理',
							color:"rgb(146,29,255)",
							state:true,
							stateInfo:'深圳木卫二科技有限公司'
						},
						content:{
							orderMarketAndCom:{
								peopleName:'李晓红',
								image:"",
								info:[{
									name:'最后跟进',
									value:"2019-6-25 14:45"
								},{
									name:"客户星级",
									value:4
								}]
							},
							contacts:[{
								name:"职务",
								value:"部门经理"
							},{
								name:'手机',
								value:'11111'
							},{
								name:'角色',
								value:'决策人'
							},{
								name:'生日',
								value:'111111'
							}
							]
						},
						operate:{
							show:true,
							borderTop:false,
							info:[{
								type:'chatbubble',
								name:'跟进'
							},{
								type:'list',
								name:'任务'
							},{
								type:'phone',
								name:'电话'
							},{
								type:'right',
								name:'更多'
							}
							]
						}
					}
				}
				
				////分隔线
			
		},
		methods: {
			 click(index) {
			 this.current = index.index
			},
			startEvaluate(targetnum, num = 5) {
				let starsArr = ["star", "star", "star", "star", "star"];
				if (targetnum === 5) {
					starsArr = ['star-filled', 'star-filled', 'star-filled', 'star-filled', 'star-filled']
				} else {
					starsArr.splice(1, targetnum)
					for (let i = 0; i < targetnum; i++) {
						starsArr.unshift('star-filled')
					}
				}
				return starsArr;
			}
		}
	}
</script>

<style>
	.timeL_center>text{
		line-height: 20px;
	}
	.timeR{
		margin-top: 30px;
	}
	.timeL_right{
		font-size:12px;
		color: #666666;
	}
	.wName{
		font-size: 14px;
	}
	.timeL_center{
		font-size:12px;
		color: #666666;
	}
	.timeL_center{
		display: flex;
		flex-direction: column;
	}
	.userLogo{
		width: 36px;
		height: 36px;
	}
	.timeL{
		display: flex;
		justify-content: space-between;
	}
	.dateS{
		margin: 35px;
		font-size:12px;
		color: #999999;
	}
	.jiben>li{
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		margin-top: 3px;
		background-color: white;
	}
	.jiben>li>text:nth-child(1){
		color: #999999;
	}
	.textTit_box{
		margin-top: 30px;
	}
	.logo{
		width:29px;
		height: 29px;
	}
	.rrrrr{
		display: flex;
		flex-direction: column;
	}
	.rrrrr>text{
		font-size: 12px;
		color: #999999;
		line-height: 30px;
	}
	.textTit_right{
		display: flex;
		flex-direction: column;
	}
	.textTit_right>text{
		font-size: 12px;
		color: #999999;
		line-height: 20px;
	}
	.textTit_xian{
		width: 4px;
		height: 100%;
		background-color: deepskyblue;
	}
	.textTit_box{
		width: 355px;
		height:110px;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.textTit{
		display: flex;
		flex-direction: column;
	}
	.oneList{
		width:90vw;
		margin: 0 auto;
		height: 40px;
		display: flex;
		justify-content: space-between;
		background-color: white;
		align-items: center;
		margin-top: 10px;
	}
	.oneList>text{
		font-size: 12px;
	}
	.oneList>text:nth-child(2){
		color: #0079fe;
	}
	.tabBox{
		width:100vw;
		height: 40px;
		background-color: white;
		margin-top: 30px;
	}
.gerBox{
 	background-color: darkgrey;
}
ul{
	display: flex;
	align-items: center;
	background-color: white;
	line-height: 50px;
}
ul>li{
width: 33vw;
height: 40px;
text-align: center;
}
.gerOne>li{
	color: #cccccc;
	font-size: 12px;
}
.gerTwo>li{
	color: #999999;
	font-size: 12px;
}
</style>
